import React from 'react';

class Prent extends React.Component {
  // 6. 父组件定义要传给女儿组件的参数
  state = {
    name: ''
  }
  // 1. 父组件定义回调函数, 用来接收儿子组件传递的参数
  // 5. 父组件通过回调函数的形参接收儿子组件传递过来的值
  getData = (data) => {
    // 6. 父组件将儿子组件传递过来的参数赋值给要传给女儿组件的参数
    this.setState({
      name: data
    })
  }
  render() {
    return (
      <div>
        <p>父组件</p>
        <hr />
        {/* 2. 父组件将回调函数传递给儿子组件 */}
        <Boy getMsg={this.getData} />
        <hr />
        {/* 7. 父组件将参数传递给女儿组件 */}
        <Girl name={ this.state.name }/>
      </div>
    )
  }
}

class Boy extends React.Component {
  // 3. 儿子组件声明要传递给女儿组件的参数
  state = {
    apple: 'apple'
  }
  handleClick = () => {
    // 4. 接收父组件传递的回调函数, 并且将要传递给女儿组件的参数, 作为回调函数的参数返回给父组件
    this.props.getMsg(this.state.apple)
  }
  render() {
    return (
      <div>
        <p>儿子</p>
        <p>
          <button onClick={this.handleClick}>给妹妹一个{ this.state.apple }</button>
        </p>
      </div>
    )
  }
}

class Girl extends React.Component {
  render() {
    return (
      <div>
        <p>女儿</p>
        {/* 8. 女儿组件接收儿子组件通过父组件传递过来的参数 */}
        <p>这是哥哥给的: { this.props.name }</p>
      </div>
    )
  }
}

export default Prent